<template>
  <div class="hello">
    <div class="my-box">
      <div class="avator-box">
        <img src="../../assets/avatar.jpg" alt="" />
      </div>
      <div class="name">翟棱-zlearn<Icon type="ios-cog" /></div>
      <div class="myinfo">
        <div class="left">
          <div>关注</div>
          <div>1</div>
        </div>
        <Divider
          style="font-size: 30px; color: rgb(94, 94, 94)"
          type="vertical"
        />
        <div class="right">
          <div>粉丝</div>
          <div>100w</div>
        </div>
      </div>
      <div class="btn">
        <Button @click="value='name2'" size="large" style="margin-bottom: 20px" long type="default"
          >草稿箱</Button
        >
        <Button @click="value='name1'" size="large" long type="primary">已发布</Button>
      </div>
    </div>
    <div class="tab">
      <Tabs size="large" v-model="value" >
        <TabPane label="我的文章" name="name1">
          <div class="article-box">
            <div class="son-box">
              <div class="left-box">
                <img
                  class="img1"
                  referrerpolicy="no-referrer"
                  src="https://qna.smzdm.com/202011/19/5fb654169a0998312.jpg_fo742.jpg"
                  alt=""
                />
              </div>
              <div class="right-box">
                <div class="title">Evutec——零触感手机壳你值得拥有</div>
                <div class="content">Hi，大家好我是赏你个大鸡腿！我又回来啦~最近一段时间炒的火热的就是苹果新出的iphone12手机了，lz作为苹果的忠实粉丝当然必须入手啦。加上购买Applecare的用户无需排队预约可直接进店购买，lz美其名曰发售当天就上车啦~好巧不巧刚买完手机就被女神张大妈抽中手机壳的众测，我就是买完手机缺个手机壳的人。使用了一段时间之后发现这个手机壳是真的香~~具体香在哪里呢，点击下拉键进行阅读吧！
               
                </div>
                <div class="bottom1">
                  <div>分类：手机</div>
                  <div>1小时前</div>
                </div>
              </div>
            </div>
             <div class="son-box">
              <div class="left-box">
                <img
                  class="img1"
                  referrerpolicy="no-referrer"
                  src="https://qna.smzdm.com/202011/19/5fb654169a0998312.jpg_fo742.jpg"
                  alt=""
                />
              </div>
              <div class="right-box">
                <div class="title">Evutec——零触感手机壳你值得拥有</div>
                <div class="content">Hi，大家好我是赏你个大鸡腿！我又回来啦~最近一段时间炒的火热的就是苹果新出的iphone12手机了，lz作为苹果的忠实粉丝当然必须入手啦。加上购买Applecare的用户无需排队预约可直接进店购买，lz美其名曰发售当天就上车啦~好巧不巧刚买完手机就被女神张大妈抽中手机壳的众测，我就是买完手机缺个手机壳的人。使用了一段时间之后发现这个手机壳是真的香~~具体香在哪里呢，点击下拉键进行阅读吧！
               
                </div>
                <div class="bottom1">
                  <div>分类：手机</div>
                  <div>1小时前</div>
                </div>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane class="tab-box" label="草稿箱" name="name2"> 
           <div class="son-box">
              <div class="left-box">
                <img
                  class="img1"
                  referrerpolicy="no-referrer"
                  src="https://qna.smzdm.com/202011/19/5fb654169a0998312.jpg_fo742.jpg"
                  alt=""
                />
              </div>
              <div class="right-box">
                <div class="title">Evutec——零触感手机壳你值得拥有</div>
                <div class="content">Hi，大家好我是赏你个大鸡腿！我又回来啦~最近一段时间炒的火热的就是苹果新出的iphone12手机了，lz作为苹果的忠实粉丝当然必须入手啦。加上购买Applecare的用户无需排队预约可直接进店购买，lz美其名曰发售当天就上车啦~好巧不巧刚买完手机就被女神张大妈抽中手机壳的众测，我就是买完手机缺个手机壳的人。使用了一段时间之后发现这个手机壳是真的香~~具体香在哪里呢，点击下拉键进行阅读吧！
               
                </div>
                <div class="bottom1">
                  <div>分类：手机</div>
                  <div>1小时前</div>
                </div>
              </div>
              <div class="delete-box">
                <Icon type="ios-trash" />
              </div>
            </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:"name1"
    };
  },
  created() {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.hello {
  margin-top: 0;
  width: 1300px;
  height: 100%;
  margin: 0 auto;
  /* margin-left: 60px; */
  position: relative;
  /* background-color: red; */
  display: flex;
  justify-content: flex-start;
  justify-content: center;
}
.my-box {
  width: 350px;
  height: 450px;
  border-radius: 10px;
  /* background-color: red; */
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  /* position: absolute;
  top: 100px;
  left: 50px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-right: 50px;
  margin-top: 40px;
}
.avator-box {
  width: 100px;
  height: 100px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  margin-top: 40px;
  overflow: hidden;
}
.name {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
.myinfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  font-size: 16px;
  font-weight: bold;
}
.btn {
  padding-top: 40px;
  width: 70%;
  margin: 0 auto;
  /* font-size: 20px; */
}
.tab {
  width: 1000px;
  /* float: left; */
}
.article-box {
  width: 100%;
  height: 1000px;
}
.son-box {
  width: 95%;
  height: 200px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-box {
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: hidden;
}
.img1 {
  height: 100%;
  width: 200px;
  display: block;
  overflow: hidden;
  object-fit: cover;
  // position:absolute;
}
.right-box {
  width: 70%;
  height: 100%;
  // background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .title {
    padding: 20px 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
  }
  .content {
    width: 90%;
    position: relative;
    line-height: 20px;
    max-height: 60px;
    overflow: hidden;
    // background-color: red;
  }
}
.bottom1 {
  width: 100%;
 height: 50px;
 margin-top: 30px;
  // background-color: red;
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding: 0 30px;
  padding-left: 10px;
}
.son-box:hover{
  width: 97%;
   box-shadow: 0px 2px 18px rgba(92, 92, 92, 0.4);
}
.delete-box{
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(202, 0, 0);
  color: #fff;
  font-size: 20px;
}
.delete-box:hover{
  width: 80px;
}

</style>
